<template>
  <el-row :gutter="20" type="flex">
    <!-- 内容+关闭按钮 -->

    <Search></Search>
    <!-- <el-col :span="10">
      <div class="provisions">
        <NewCard title="解答列表" :isright="true" >
          <template #right>
            <el-input
              placeholder="搜索解答"
              style="margin-right: 10px"
              v-model="searchvalue"
            ></el-input>
            <el-button
              type="primary"
              round
              class="searchBtn"
              @click="search(searchvalue)"
              >搜索</el-button
            >
          </template>
          <div class="articleslaw">
            <ul>
              <li class="fristli">解答名称</li>
            <li
              v-for="(law, index) in lawList"
              :key="index"
              
            >
              <p
              @click="select(law)"
              :class="{ activeindex: currentIndexid == law.id }"
              >
                {{ law.title }}
              <span>{{law.background}}</span>
              </p>
            </li>
          </ul>
           <div class="pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :page-sizes="[10, 20, 30, 40]"
                  :pager-count="5"
                  layout="total, prev, pager, next, jumper"
                  :total="pageing.total"
                >
                </el-pagination>
              </div>
          </div>
        </NewCard>
      </div>
    </el-col>-->
    <el-col :span="14">
      <div class="provisions law-detailsBox">
        <NewCard :isright="true">
          <template #title>
            <b v-if="titlename" v-labelhot="{ hWord: searchvalue, word: titlename }"></b>
            <b v-else>查询内容使用规则</b>
          </template>
          <template #right>
            <el-input
              placeholder="搜索内容信息"
              style="margin-right: 10px"
              @keyup.enter.native="searchinfoclick(searchinfo)"
              v-model="searchinfo"
            ></el-input>
          </template>
          <div class="law-details">
            <!-- 有选择的时候 currentIndexid 是有id的 -->
            <template v-if="currentIndexid">
              <el-checkbox-group v-model="checkLaw" v-if="listActive=='1'">
                <!-- 法条的 -->
                <el-checkbox
                  @change="
                    (content) => {
                      selectLawFn(content, law, lawDetails);
                    }
                  "
                  :label="law.content.join(' ')"
                  v-for="(law, index) in lawDetails"
                  :key="index"
                >
                  <b v-labellight="{ hWord: searchvalue, word: law.content.join(' ') }"></b>
                </el-checkbox>
              </el-checkbox-group>

              <el-checkbox-group v-model="checkLaw" v-else-if="listActive=='4'">
                <!-- 合同的 -->
                <el-checkbox
                  @change="
                    (content) => {
                      selectLawFn(content, law, lawDetails);
                    }
                  "
                  :label="law"
                  v-for="(law, index) in lawDetails"
                  :key="index"
                >
                  <p v-html="law"></p>
                </el-checkbox>
              </el-checkbox-group>

              <!-- 其他的 -->
              <el-checkbox-group v-model="checkLaw" v-else>
                <el-checkbox
                  @change="
                      (content) => {
                        selectLawFn(content, law, lawDetails);
                      }
                    "
                  :label="law.content"
                  v-for="(law, index) in lawDetails"
                  :key="index"
                >
                  <b v-labellight="{ hWord: searchvalue, word: law.content }"></b>
                </el-checkbox>
              </el-checkbox-group>

              <!-- 标签内容显示 -->
              <div class="detail_label" v-if="labelAllList.length">
                <el-tag
                  v-for="(label, index) in labelList"
                  :key="index"
                  @click="clickDetailLabel(label)"
                >{{ label }}</el-tag>
                <el-button
                  size="mini"
                  class="label_more"
                  @click="labelMore"
                  v-if="moreState"
                  v-show="morehypo"
                >
                  更多
                  <i class="el-icon-caret-bottom"></i>
                </el-button>
                <el-button
                  size="mini"
                  class="label_more"
                  @click="labelMorePack"
                  v-else
                  v-show="morehypo"
                >
                  收起
                  <i class="el-icon-caret-top"></i>
                </el-button>
              </div>
            </template>
            <!-- 使用规则内容 -->
            <div class="ruleBox" v-else>
              <p>· 查询内容仅供参考；</p>
              <p>· 复制粘贴导致的法律风险，如侵权等，由咨询师个人承担。</p>
            </div>
          </div>
          <SubBtn>
            <template slot="btn">
              <p>
                <i class="el-icon-postcard"></i>
                已选
                <span>{{ checkLaw.length }}</span> 条
              </p>
              <el-button type="primary" round @click="submit" v-hasPermi="['base:documents:add']">确定</el-button>
            </template>
          </SubBtn>
        </NewCard>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import debounce from "lodash/debounce";
import {
  getOveratopListApi,
  getLawInfoApi
} from "@/wss/newApi_3-24/doc/law.js";
import { getselectMaterialaddApi } from "@/wss/newApi_3-24/officewebsite/selectmaterial.js";
import Search from "./components/search.vue";
export default {
  components: { NewCard, SubBtn, Search },
  name: "anser",
  data() {
    return {
      searchvalue: "", //左边搜索框的值
      searchinfo: "", //右边搜索框的值
      currentIndexid: "", //高亮值
      newsearchinfo: [],
      arraylist: [],
      isActive: 0,
      //当前激活的项目条件
      activeNames: [0],
      //法条列表
      lawList: [],
      newlawList: [],
      articleData: {}, //当前选中的文章所有数据
      // 当前选中的法条详情
      lawDetails: [],
      // 选中的法条
      checkLaw: [],
      titlename: "", //
      // 新的选中的法条
      newCheckLaw: [],
      pageing: { pageNum: 1, pageSize: 10, total: 0 },

      labelAllList: [], //全部标签列表
      labelList: [], //当前展示的标签列表
      labelListNum: 8, //标签一次添加的数量
      moreState: true, //标签更多按钮的显示状态(更多还是收起)
      morehypo: true, //当标签数量少于8个的时候隐藏

      listActive: "" //当前选择的是什么类型的文章
    };
  },
  created() {
    // this.getLawListTitleFn();
  },
  mounted() {
    // 通过$bus选择某一篇文章
    this.$bus.$on("contentSelectBus", (content, type) => {
      console.log(content, type);
      this.articleData = content;
      this.select(content, type);
    });

    // 通过$bus获取输入框的值
    this.$bus.$on("getInputSearch", inputSearch => {
      let arr = inputSearch.split(" ");
      this.searchvalue = arr.join("|");
    });

    // 通过$bus获取清除输入框的数据
    this.$bus.$on("clearInputSearch", () => {
      this.searchvalue = "";
    });
  },
  methods: {
    // 关闭内容+按钮的bus
    contentCloseBtn() {
      this.$bus.$emit("closeContentBus");
    },

    // bln是否选中，law当前选中的法条，title法律标题
    selectLawFn(bln, law, { title, id }) {
      // 判断是否已存在
      if (bln) {
        if (law.id) {
          // 不是合同的三大类
          law.lawTitle = title;
          law.lawId = id;
          this.newCheckLaw.push(law);
        } else {
          // 是合同的一类
          this.newCheckLaw.push(law);
        }
        // 已存在就删除
      } else {
        let index = this.newCheckLaw.findIndex(item => item.id === law.id);
        this.newCheckLaw.splice(index, 1);
      }
    },

    // 查询对应的解答数据
    async getLawListTitleFn() {
      // title: this.searchvalue ? this.searchvalue : "政策"
      const { pageNum, pageSize } = this.pageing;
      const { data, rows } = await getOveratopListApi({
        pageNum,
        pageSize
      });
      this.pageing.total = data.total;
      this.lawList = data.rows;
      console.log(this.lawList, "111111");
      this.newlawList = data.rows;
      this.checkLaw = [];
    },

    // 选择某一条的时候
    async select(article, type) {
      this.listActive = type;
      // 文章article，类型type
      this.currentIndexid = article.id; //id
      this.titlename = article.title; //标题
      this.labelAllList = article.labels; //标签
      this.labelList = this.labelAllList.slice(0, this.labelListNum);
      //先显示更多按钮
      this.morehypo = true;
      //当标签数量少于8个的时候隐藏
      if (this.labelAllList.length < 8) {
        this.morehypo = false;
      }

      if (type == "2") {
        // 解答
        this.lawDetails = article.answer;
      } else if (type == "1") {
        // 法条
        this.lawDetails = article.info;
      } else if (type == "3") {
        // 政策
        this.lawDetails = article.info;
      } else {
        // 合同
        this.lawDetails = article.info;
        this.titlename = article.name; //标题
      }
    },

    //点击内容页标签的时候 去搜索  //防抖
    clickDetailLabel: debounce(function(label) {
      if (!this.searchvalue.includes(label)) {
        this.$bus.$emit("detailLabel", label);
      }
    }, 200),

    //点击标签的更多按钮展示更多标签
    labelMore() {
      this.labelListNum = this.labelListNum + 8;
      this.labelList = this.currentDetail.labels.slice(0, this.labelListNum);
    },

    //点击标签的收起按钮
    labelMorePack() {
      this.labelList = this.currentDetail.labels.slice(0, 8);
      this.moreState = true;
    },
    // 添加文案

    async submit() {
      let newCheckLaw = JSON.parse(JSON.stringify(this.newCheckLaw));
      let content = "";
      newCheckLaw.forEach(item => {
        content += item.content.toString();
      });
      let arr = [];
      arr.push({
        content: content,
        esid: this.articleData.id,
        title: this.articleData.title
      });
      const result = await getselectMaterialaddApi(Array.from(arr));
      if (result.code == 200) {
        this.newCheckLaw = [];
        this.$message({
          message: result.msg,
          type: "success"
        });
      }
      //console.log(result);
    },

    Animation(val) {
      this.checkLaw = val;
    },

    //过滤法条
    search(value) {
      this.searchvalue = value;
      this.getLawListTitleFn();
    },

    //多路对应法条数据
    async searchinfoclick(value) {
      let list = [];
      // 根据类型判断
      if (
        this.listActive == "1" ||
        this.listActive == "3" ||
        this.listActive == "4"
      ) {
        // 法条和政策的
        list = JSON.parse(JSON.stringify(this.articleData.info));
      } else if (this.listActive == "2") {
        // 解答
        list = JSON.parse(JSON.stringify(this.articleData.answer));
      }
      // 输入框为空的时候
      if (value == "") {
        this.lawDetails = list;
      }
      // 过滤
      let newArr = [];
      newArr = list.filter(item => {
        if (this.listActive == "4") {
          // 合同
          return item.includes(value);
        } else if (this.listActive == "1") {
          // 法条
          return item.content.join("").includes(value);
        } else {
          // 另外的解答和政策
          return item.content.includes(value);
        }
      });
      // 过滤完成后赋值
      this.lawDetails = newArr;
    },

    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getLawListTitleFn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getLawListTitleFn();
    }
  }
};
</script>

<style scoped>
ul,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.right .el-input {
  width: 120px;
}
.right .searchBtn {
  background-color: #f87a23;
  border-color: #f87a23;
  padding: 8px 20px;
}
.el-row {
  height: 100%;
}
.el-card {
  position: relative;
}
>>> .top .left h1 {
  flex-wrap: nowrap;
}

/* 内容+展开关闭按钮 */
.contentWidth {
  position: absolute;
  right: -12px;
  top: 48%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

.law-detailsBox >>> .top .left {
  flex: 3;
}
.law-detailsBox >>> .top .left h1 {
  display: flex;
}
.law-detailsBox >>> .top .left h1 > b {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.law-detailsBox >>> .top .leftSearch {
  margin: 20px 10px;
}
/* 法条列表 */
/* ::v-deep .el-collapse .el-collapse-item__header,
::v-deep .el-collapse .el-collapse-item__header.focusing {
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}
::v-deep .el-collapse .el-collapse-item__wrap {
  border-bottom: 0;
}
::v-deep .el-collapse .el-collapse-item__content {
  padding-bottom: 0;
}
::v-deep .el-collapse .el-icon-arrow-right:before {
  content: "\E790";
}
::v-deep .el-collapse .el-collapse-item__arrow.is-active {
  transform: rotate(180deg);
}

.el-collapse ul > li {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
  color: #2e3f5e;
} */
.articleslaw ul {
  padding-bottom: 70px;
}
.articleslaw ul > li {
  font-size: 14px;
}
.articleslaw .fristli {
  padding: 10px 30px;
  font-size: 14px;
  color: #a7aeb9;
}

.articleslaw ul li p {
  padding: 15px 30px;
  display: flex;
  flex-direction: column;
}
.articleslaw ul li p span {
  padding-top: 5px;
  color: #a7aeb9;
  font-size: 12px;
}
/* 法条详情 */
.law-details {
  margin-top: 20px;
  margin-bottom: 60px;
}
/* 使用规则 */
.law-details .ruleBox {
  padding: 0 30px;
  color: #666;
  font-size: 14px;
  line-height: 30px;
}
.law-details .ruleBox .el-empty {
  padding-bottom: 10px;
}

.el-checkbox-group .el-checkbox {
  display: flex;
  white-space: normal;
  margin-right: 0;
  margin-bottom: 20px;
  padding: 0 30px;
}
.el-checkbox-group .el-checkbox b {
  font-weight: 400;
}
::v-deep .el-checkbox-group .el-checkbox .el-checkbox__label {
  line-height: 28px;
}
::v-deep .el-checkbox-group .el-checkbox.is-checked .el-checkbox__label {
  color: #f87a23;
}
::v-deep .el-checkbox-group .el-checkbox .el-checkbox__input {
  margin-top: 3px;
}

::v-deep .el-checkbox .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border-color: #bbbbbb;
  background: #fff;
  border-radius: 50%;
}
::v-deep .el-checkbox .is-disabled .el-checkbox__inner {
  background: #f2f2f2;
}
::v-deep .el-checkbox .is-checked .el-checkbox__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .el-checkbox__input .el-checkbox__inner::after {
  content: "";
  width: 9px;
  height: 5px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  vertical-align: middle;
  transform: rotate(0deg) scaleY(0);
  border-radius: 0px;
  background: none;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
  transform: rotate(-45deg) scaleY(1);
}

/* 右侧按钮样式 */
::v-deep .subBtn {
  align-items: center;
  justify-content: space-between;
  padding: 8px 30px !important;
  height: 50px;
  z-index: 99;
}
::v-deep .subBtn > p {
  color: #364764;
}
::v-deep .subBtn > p > i {
  color: #bbb;
}
::v-deep .subBtn > p > span {
  color: #f87a23;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0 !important;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
.provisions {
  height: 100%;
}
>>> .provisions .el-card__body {
  padding: 0;
  height: 100%;
}
>>> .provisions .el-card__body .top {
  padding: 0 15px;
}
>>> .provisions .el-collapse .el-collapse-item__header {
  padding: 0 30px;
}
::v-deep .provisions .el-card .el-card__body > div {
  padding-top: 0;
  height: calc(100% - 57px);
  overflow-y: auto;
}

/* >>> .provisions ul li p {
  padding: 0 30px;
} */
/* 高亮 */
.activeindex {
  background-color: #ebecf0;
}
/* 分页 */
.pagination {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: white;
  text-align: center;
  padding: 20px 0;
}

/* 标签 */
.detail_label {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 0 30px;
  padding-bottom: 50px;
}
.detail_label .el-tag {
  width: 11%;
  color: #999;
  padding: 0;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 15px;
  line-height: 26px;
  background-color: #fff;
  margin-right: 1.71%;
  margin-bottom: 10px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail_label .el-tag:nth-child(8n) {
  margin-right: 0;
}
.label_more {
  display: block;
  background-color: transparent;
  border: 0;
  margin: 0 auto;
  color: #b9b9b9;
  flex-basis: 100%;
}
</style>
